<template>
  <div style="padding:20px">
    <!-- 顶部操作去 -->
    <el-button type="primary" style="marginBottom:12px" @click="addOne">新增</el-button>
    <!--data  放列表数据  列表-->
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" />
      <el-table-column prop="pic_url" label="轮播图">
        <!-- 插槽 -->
        <template slot-scope="scope">
          <!-- <img src="" alt=""> -->
          <!-- <el-button @click="fn(scope)">打印 scope</el-button> -->
          <img width="70" :src="scope.row.pic_url" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="跳转链接">
        <template>
          ###
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >编辑</el-button>
          <!-- 触发deleteThis  scope.row 点击 删除这一行的 行数据  -->
          <el-button type="text" size="small" @click="deleteThis(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog
      :title="isEditer? '编辑轮播图':'新增轮播图'"
      :visible.sync="dialogVisible"
      width="70%"
      @close="from={pic_url: '',link: '',sort: ''}"
    >
      <div>
        <el-form ref="elfrom" :model="from" :rules="rules">
          <el-form-item label="轮播图地址" prop="pic_url">
            <el-input v-model="from.pic_url" />
          </el-form-item>
          <el-form-item label="跳转链接" prop="link">
            <el-input v-model="from.link" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="from.sort" />
          </el-form-item>
        </el-form>
      </div>
      <!-- slot="footer" el组件内的  具名插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { listRotation, deleteRotation, addRotation, editRotation } from '@/api/rotation'

export default {
  data() {
    return {
      tableData: {
        page: 1,
        limit: 10
      }, // 查询列表数据
      list: [], // 列表数据
      dialogVisible: false, // 控制 弹出框显示隐藏
      from: {
        pic_url: '',
        link: '',
        sort: ''
      }, // 表单数据
      rules: {
        pic_url: [
          { required: true, trigger: 'blur', message: '请输入轮播图地址' }
        ],
        link: [
          { required: true, trigger: 'blur', message: '请输入跳转地址' }
        ],
        sort: [
          { required: true, trigger: 'blur', message: '请输入排序' }
        ]
      }, // 表单校验
      isEditer: false // 弹窗是否是编辑功能
    }
  },
  mounted() {},
  async created() {
    this.getTableList()
  },
  methods: {
    // 调接口获取列表信息
    async getTableList() {
      const res = await listRotation(this.tableData)
      this.list = res.data.list
    },
    // 删除
    deleteThis(row) {
      // 询问用户是否确认删除
      this.$confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口 删除该轮播图
        await deleteRotation({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新查询列表数据
        this.getTableList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // addOne
    addOne() {
      this.dialogVisible = true
      this.isEditer = false
    },
    // 点击弹窗确定按钮
    sub() {
      console.log(this.$refs)
      this.$refs.elfrom.validate(async(valed) => {
        // 校验通过
        if (valed) {
          if (this.isEditer) {
            // 走编辑逻辑
            await editRotation(this.from)
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
          } else {
            // 新增逻辑
            await addRotation(this.from)
            this.$message({
              type: 'success',
              message: '新增成功!'
            })
          }
          // 关弹窗
          this.dialogVisible = false
          // 重新查询列表
          this.getTableList()
          // 清空表单数据
          this.from = {
            pic_url: '',
            link: '',
            sort: ''
          }
        }
      })
      // addRotation(this.from)
    },
    // 编辑
    handleClick(row) {
      // console.log(row)
      this.dialogVisible = true
      // 弹窗 切换为编辑
      this.isEditer = true
      // 数据回显直接给
      this.from = {
        pic_url: row.pic_url,
        link: row.link,
        sort: row.sort,
        id: row.id // 编辑接口 需要用到id
      }
    }
  }
}
</script>
